<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <div @click="work3">
        <div @click="work2()">
            <button type="button" @click.stop="work1()">按钮1</button>
            <a href="http://www.baidu.com" @click.prevent.stop="handleA()">百度</a>
        </div>
        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis"></a>

        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat"></a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>
    </div>

</div>

<script type="text/javascript">
    /*
    事件冒泡：子元素触发某个事件之后，会依次将这个事件传递给父元素
    vue事件修饰符：
        stop: 阻止事件冒泡
        prevent:阻止元素默认的事件行为
    */


    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            work1: function () {
                console.log('work1-----')
            },
            work2: function () {
                console.log('work2-----')
            },
            work3: function () {
                console.log('---work30000')
            },
            handleA: function () {
                console.log('点击了a标签')
            }
        }
    })
</script>


</body>
</html>
